<template>
  <el-dialog :title="titleName" v-model="visible" :close-on-click-modal="false" draggable>
    <!-- <div style="margin: 20px;">
      当前人员：{{ userName == '' ? '暂无' : userName }}

    </div> -->
    <splitpanes>
      <pane>
        <div class="layout-padding-auto layout-padding-view">

          <div style="display: flex;align-items: center;">
            <div style="margin-right: 10px;width: 50px;">开始:</div>
            <el-date-picker arrow-control format="YYYY-MM-DD" value-format="YYYY-MM-DD" v-model="startTime"
              @change="timeChange" placeholder="请选择开始时间">
            </el-date-picker>


            <div style="margin-right: 10px;width: 50px;margin-left: 30px">结束:</div>
            <el-date-picker arrow-control format="YYYY-MM-DD" value-format="YYYY-MM-DD" v-model="endTime"
              @change="timeChange" placeholder="请选择结束时间">
            </el-date-picker>

          </div>
          <el-table :data="AMLsit" border style="margin-top: 20px;">
            <el-table-column type="index" label="序号" width="100" />
            <el-table-column prop="date" label="刷卡时间" />
          </el-table>
        </div>
      </pane>
      <!-- <pane>
        <div class="layout-padding-auto layout-padding-view">
          <el-row>
            <el-col>
              <div style="display: flex;align-items: center;margin-bottom: 10px;">
                <div style="margin-right: 10px;">月份:</div>
                <el-date-picker arrow-control format="YYYY-MM-DD" value-format="YYYY-MM-DD" v-model="monthTime"
                  @change="monthChange" placeholder="请选择开始时间">
                </el-date-picker>
              </div>
              <el-table max-height="800" :data="AMLsitInfo" border>
                <el-table-column prop="date" label="日期" width="100" />
                <el-table-column prop="week" label="星期" width="70" />
                <el-table-column label="班次" show-overflow-tooltip>
                  <template #default="scope">
                    <div>{{ scope.row.classesRule == null ? '休' :
                      scope.row.classesRule.ruleName
                      }}</div>
                  </template>
</el-table-column>
<el-table-column label="班组" show-overflow-tooltip>
  <template #default="scope">
                    <div>{{ scope.row.groupInformation == null ? '休' : scope.row.groupInformation.groupName }}
                    </div>
                  </template>
</el-table-column>

<el-table-column prop="signOne" label="上班" width="170" />
<el-table-column prop="signTwo" label="下班" width="170" />
<el-table-column prop="signThree" label="上班" width="170" />
<el-table-column prop="signFour" label="下班" width="170" />
<el-table-column prop="signFive" label="上班" width="170" />
<el-table-column prop="signSix" label="下班" width="170" />
<el-table-column prop="remark" label="出勤" width="260" />

</el-table>
</el-col>
</el-row>
</div>
</pane> -->
    </splitpanes>


  </el-dialog>
</template>

<script setup lang="ts" name="ClassesRulesDialog">
import { useMessage } from "/@/hooks/message";

import { formatDate } from '/@/utils/formatTime';
import { signMonthByUsername, selectAllSignsBySection } from "/@/api/personnel/attendanceManagement";
import { title } from "process";
const emit = defineEmits(['refresh']);

// 定义变量内容
const visible = ref(false)
const titleName = ref('详情')
const startTime = ref()
const endTime = ref()
const monthTime = ref()
const month = ref()
const userName = ref('')
const userNameCode = ref('')
const AMLsit = ref([])
const AMLsitInfo = ref([])


monthTime.value = formatDate(new Date(), 'YYYY-mm-dd')
startTime.value = formatDate(new Date(), 'YYYY-mm-dd').substring(0, 8) + '01'
endTime.value = formatDate(new Date(), 'YYYY-mm-dd')
month.value = formatDate(new Date(), 'YYYY-mm-dd')


// 打开弹窗
const openDialog = (row) => {
  visible.value = true

  userName.value = row.name
  titleName.value = row.name + '  的详情'
  userNameCode.value = row.username
  AMLsit.value = []
  selectAllSignsBySection({ username: row.username, startTime: startTime.value + ' 00:00:00', endTime: endTime.value + ' 23:59:59' }).then((res: any) => {
    console.log('res查询考勤', res);
    AMLsit.value = res.data
  })
  AMLsitInfo.value = []
  signMonthByUsername({ username: row.username, date: monthTime.value }).then((res: any) => {
    AMLsitInfo.value = res.data
  })


};

const timeChange = () => {
  if (userNameCode.value == '') {
    useMessage().error('未选择人员');
    return
  }
  if (startTime.value != '' && endTime.value != '') {
    let time = getTime(startTime.value, endTime.value)
    if (time) {

      AMLsit.value = []
      selectAllSignsBySection({ username: userNameCode.value, startTime: startTime.value + ' 00:00:00', endTime: endTime.value + ' 23:59:59' }).then((res: any) => {
        console.log('res查询考勤', res);
        AMLsit.value = res.data
      })
    } else {
      useMessage().error('开始时间不能大于结束时间');
    }

  }

}
const getTime = (time1, time2) => {
  if (time1.substring(0, 4) <= time2.substring(0, 4)) {
    if (time1.substring(5, 7) <= time2.substring(5, 7)) {
      if (time1.substring(8, 10) <= time2.substring(8, 10)) {

        return true
      } else {
        return false
      }

    } else {
      return false
    }
  } else {
    return false
  }

}
const monthChange = () => {
  if (userNameCode.value == '') {
    useMessage().error('未选择人员');
    return
  }
  AMLsitInfo.value = []
  signMonthByUsername({ username: userNameCode.value, date: monthTime.value }).then((res: any) => {
    AMLsitInfo.value = res.data
  })
}
// 暴露变量
defineExpose({
  openDialog
});
</script>